<template>
  <div class="filter-box">
    <!--厂商管理=》设备列表按钮组-->
    <div v-if="isGroupBtn">
      <el-button-group>
        <el-button :class="{activeBtn: $store.state.btnGroupTitle === item.name}" v-for="(item, index) of btnList" :key="index" @click="clickHandel(item.name)" size="small">{{item.name}}</el-button>
      </el-button-group>
    </div>

    <div class="search-bar">
      <!--打开dialog按钮-->
      <el-button v-if="addBtnName" @click="changeAddDialog" type="primary" icon="el-icon-plus">{{addBtnName}}</el-button>
      <el-button v-if="syncDataName" @click="syncData" type="primary">{{syncDataName}}</el-button>
      <!--搜索框-->
      <el-input @keyup.native.enter="interSearch" v-if="searchPlaceholder" class="input-with-select" :class="{'ml-15': addBtnName||syncDataName}" :placeholder="searchPlaceholder" v-model.trim="searchVal">
        <el-button @click="interSearch" slot="append">搜索</el-button>
      </el-input>
      <!--搜索框后面两个筛选按钮-->
      <template>
        <p v-if="moreSelectBtn" class="fit-more-select" @click="moreSelectFn">更多筛选<span :class="['el-icon-caret-right',{'rotation90':moreSelectVisible}]"></span></p>
        <p v-if="isShowSelect" class="fit-more-show" @click="moreShowFn">展示筛选<span :class="['el-icon-caret-right',{'rotation90':moreShow}]"></span></p>
        <p v-if="isClearBtn" class="fit-more-select" @click="clearSelect">清空筛选条件</p>
      </template>
      <el-button v-if="rightBtnName" @click="handelRightBtn" type="primary" class="btn-right2">{{rightBtnName}}</el-button>
      <slot name="right"></slot>
    </div>
    <!--更多展示的内容-->
    <el-collapse-transition>
      <div v-if="moreShow" class="search-checkbox">
        <span class="min-w70">显示选项：</span>
        <el-checkbox-group @change="checkboxChange" v-model="checkList">
          <el-checkbox
            v-for="(item, index) of moreShowList"
            :key="index"
            :label="item.title"
            :checked="item.ischeck"></el-checkbox>
        </el-checkbox-group>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>

export default {
  name: 'Filter-box',
  props: {
    clearSearchVal: { // 是否点击了清除按钮
      type: Boolean
    },
    syncDataName: { // 搜索框前面是否有空格
      type: String
    },
    isGroupBtn: { // 厂商管理，设备列表按钮组
      type: Boolean
    },
    rightBtnName: { // 右侧按钮
      type: String
    },
    addBtnName: { // 添加按钮名
      type: String
    },
    searchPlaceholder: {
      type: String
    },
    moreShowList: { // 更多展示列表
      type: Array
    },
    moreSelectBtn: { // 是否显示更多筛选
      type: Boolean,
      default: true
    },
    isShowSelect: { // 是否显示展示筛选
      type: Boolean,
      default: true
    },
    isClearBtn: { // 是否显示清空筛选
      type: Boolean,
      default: true
    },
    checkListValue: {
      type: Array
    }
  },
  data () {
    return {
      btnList: [
        { name: '设备列表' },
        { name: '员工管理' },
        { name: '传感器管理' },
        { name: '品牌管理' },
        { name: '基础信息' }
      ],
      breadList: [],
      searchVal: '',
      moreShow: false,
      moreSelectVisible: false,
      checkList: [],
      serchUserType: '',
      serchUserState: ''
    }
  },
  // created () {
  //   this.getBreadcrumb()
  // },
  watch: {
    // $route () {
    //   this.getBreadcrumb()
    // },
    clearSearchVal (val) {
      if (val === true) {
        this.searchVal = ''
        val = false
        this.$emit('resetSearchVal', val)
      }
    },
    checkListValue() {
      this.checkList = this.checkListValue
    },
    checkList(newValue,oldValue) {
      if(newValue === true || newValue === false) {
        this.checkList= oldValue
      }
    }
  },
  mounted () {
  },
  methods: {
    getBreadcrumb () {
      const breadNumber = typeof (this.$route.meta.breadNumber) !== 'undefined' ? this.$route.meta.breadNumber : 0
      let query = this.$route.query
      let newBread
      if (Object.keys(query).length && query.breadTitle) {
        newBread = { name: query.breadTitle, path: this.$route.fullPath }
      } else {
        newBread = { name: this.$route.meta.title, path: this.$route.fullPath }
      }
      this.breadList = JSON.parse(sessionStorage.getItem('breadListStorage')) || []
      this.breadList.splice(breadNumber, this.breadList.length - breadNumber, newBread)
      sessionStorage.setItem('breadListStorage', JSON.stringify(this.breadList))
    },
    /* 同步数据 */
    syncData () {
      this.$emit('syncData')
    },
    /* 清空筛选条件 */
    clearSelect () {
      this.searchVal = ''
      this.$emit('clearSelect')
    },
    clickHandel (name) {
      this.$store.commit('changeBtnGroupTitle', name)
      let obj = new Map([
        ['设备列表', 'deviceList'],
        ['员工管理', 'interImplement'],
        ['传感器管理', 'interSensor'],
        ['品牌管理', 'interBrand'],
        ['基础信息', 'editManuf']
      ])
      let action = obj.get(name)
      this.$emit(action)
    },
    /* 点击搜索按钮 */
    interSearch () {
      this.$emit('interSearch', this.searchVal)
    },
    /* 添加用户之类的弹窗 */
    changeAddDialog () {
      this.$emit('changeAddDialog')
    },
    /* 右侧按钮事件 */
    handelRightBtn() {
      this.$emit('handelRightBtn')
    },
    /* 点击 更多筛选按钮 */
    moreSelectFn () {
      if (this.moreShow === true) {
        this.moreShow = false
      }
      this.moreSelectVisible = !this.moreSelectVisible
      this.$emit('moreSelectVisible', this.moreSelectVisible)
    },
    /* 点击 更多展示按钮 */
    moreShowFn () {
      this.moreShow = !this.moreShow
      if (this.moreSelectVisible === true) {
        this.moreSelectVisible = false
        this.$emit('moreSelectVisible', this.moreSelectVisible)
      }
      this.checkList = []
    },
    /* 更多展示checkbox选项 */
    checkboxChange (val) {
      const checkboxList = this.moreShowList.map((ele) => {
        let i = val.indexOf(ele.title)
        if (i < 0) {
          ele.ischeck = false;
        } else {
          ele.ischeck = true;
        }
        return ele;
      });
      this.$emit('changeCheckbox', checkboxList)
    }
  }
}
</script>
